import React from 'react';
import { 
	Text, 
	View, 
	Image, 
	StyleSheet, 
	TouchableOpacity, 
	TextInput, 
	TouchableHighlight, 
	Alert } from 'react-native';
import postData from './postData';

//用户注册加密
// let SHA256 = require('crypto-js/sha256');

class FormInput extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			userName:'',
			password:'',
			isClick:false
		}
	}
	componentWillunmounted(){
		this.timer && clearTimeout(this.timer);
	}

	registerUser = () => {
		if(this.state.userName != '' || this.state.password != ''){
			Alert.alert(`用户名：${this.state.userName}
						密码：${this.state.password}`
			);

			let formData = new FormData();
			formData.append('userName', this.state.userName);
			formData.append('password', this.state.password);
			let url = "https://example.com/";

			postData.postJson(url, formData, (responseText) => {
				console.log(responseText);
				this.isLoginSuccess();
			});

		}else{
			Alert.alert('用户名和密码不能为空！')
		}

		
		// let userInfo = {};
		// userInfo = {
		// 	userName: this.state.userName,
		// 	password: SHA256(this.state.password)
		// }
		// console.log(SHA256(this.state.password))
		
	}

	isLoginSuccess = () => {
		const { navigate } = this.props.sendProps.navigation;
		navigate('Home');
	}

	textButtonIsClicked = () => {
		this.setState({
			isClick: true
		})
		this.timer = setTimeout(() => {
			this.setState({
			isClick: false
			});
			clearTimeout(this.timer);}
		,300)
	}

	render() {
		const { navigate } = this.props.sendProps.navigation;
		return (
			<View style={styles.formWrap}>
				<View style={styles.containerWrap}>
					<View style={styles.container}>
						<Image style={styles.userImage}
         						 source={require('../assets/img/user.png')} />
						<Text style={styles.textSize}>学号/工号</Text>
					</View>
					<View style={styles.textInputContainer}>
						<TextInput style={styles.textInput}
							underlineColorAndroid={'transparent'}
							maxLength={15}
							onChangeText={(userName) => this.setState({userName})}
							value={this.state.userName}
						/>
					</View>
				</View>
				<View>
					<View style={styles.container}>
						<Image style={styles.userImage}
         						 source={require('../assets/img/key.png')} />
						<Text style={styles.textSize}>教务处密码</Text>
					</View>
					<View>
						<TextInput style={styles.textInput}
							underlineColorAndroid='transparent'
							secureTextEntry={true}
							onChangeText={(password) => this.setState({password})}
							value={this.state.password}
						/>
						<Image />
					</View>
				</View>
				<View style={styles.buttons}>
					<View>
						<TouchableOpacity
							style={styles.button}
				        	onPress={this.registerUser}
				       		>
				        	<Text style={styles.buttonStyle}> 注册 </Text>
				       	</TouchableOpacity>
					</View>
					<View>
						<Text onPress={this.textButtonIsClicked} style={this.state.isClick ? styles.textButtonStyleChange : styles.textButtonStyle}>已有账号，去登录</Text>
					</View>
				</View>
			</View>

			)
	}
}


const styles = StyleSheet.create({
	formWrap: {
		flex: 1,
	},
	containerWrap: {
		marginBottom: 36
	},
	container: {
		flexDirection: 'row',
		alignItems: 'flex-end',
		justifyContent: 'flex-start',
		// marginBottom: 16
	},
	userImage: {
		width: 22,
		height: 22,
		marginRight: 20
	},
	textSize: {
		fontSize: 18,
		color: '#4286F5'
	},
	textInput: {
		borderColor: '#fff',
		borderBottomColor: '#A8C8FE',
		height: 30, 
		borderWidth: 1,
		paddingLeft: 5,
		fontSize: 16,
		marginTop: 8,
	},
	textInputContainer: {
		// borderColor: '#A8C8FE'
	},
	button: {
		alignItems: 'center',
		justifyContent: 'center',
		width: 254,
		height: 42,
		backgroundColor: '#4286F5',
		marginBottom: 25,
		borderRadius: 10
	},
	buttons: {
		flex:1,
		alignItems: 'center',
		marginTop: 25
	},
	// textButton: {
	// 	color: '#4285F4'
	// },
	buttonStyle: {
		fontSize: 22,
		color: '#fff'
	},
	textButtonStyle: {
		color: '#4285F4'
	},
	textButtonStyleChange: {
		color: '#FF3333'
	}
})




module.exports = FormInput